<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
#site_main{
	width: 1200px;
	height: 570px;
}

#site_title1{
	background-color: #f5b336;
	width: 240px;
	height: 570px;
	float: left;
}

#site_title2{
	background-color: #f5982a;
	width: 240px;
	height: 570px;
	float: left;
}

#site_title3{
	background-color: #00ccff;
	width: 240px;
	height: 570px;
	float: left;
}

#site_title4{
	background-color: #00a3e6;
	width: 240px;
	height: 570px;
	float: left;
}

#site_title5{
	background-color: #f85646;
	width: 240px;
	height: 570px;
	float: left;
}

#site_tle_item, #site_tle_item2, #site_tle_item3, #site_tle_item4, #site_tle_item5{
	background-color: transparent;
	width: 100%;
	height: 370px;
	padding-top: 100px;
	text-align: center;
	float: left;
}


#site_tle_btn, #site_tle_btn2, #site_tle_btn3, #site_tle_btn4, #site_tle_btn5{
	background-color: transparent;
	width: 100%;
	height: 100px;
	float: left;
	text-align: center;
	opacity:0;
}

.site_main input{
	width:150px;
	height:50px;
	color: white;
	background-color: transparent;
	border:3px solid white;
	font-family: fantasy;
	font-size: 20px;
	border-radius: 15px;
}

.site_tle_btn input:hover{
	background-color: white;
	color: navy;
	font-weight: bold;
	font-size: 22px;
	-webkit-transition: background-color 1s;
}

#imgout{
	opacity:0;
}

#imgout2{
	opacity:0;
}

#imgout3{
	opacity:0;
}

#imgout4{
	opacity:0;
}

#imgout5{
	opacity:0;
}

</style>

<script>
		
	function getId(id){
		return document.getElementById(id);		
	}

	function appear(btn){
		getId(btn).style.opacity=1;
		
		getId(btn).style.WebkitTransition="opacity 1s";
	}
	
	function appear2(id, imginid, imgoutid){
		var arr = new Array();
		arr[0] = "site_title1";
		arr[1] = "site_title2";
		arr[2] = "site_title3";
		arr[3] = "site_title4";
		arr[4] = "site_title5";
		
		var argb = new Array();
		argb[0] = "#f4c053";
		argb[1] = "#f4b25d";
		argb[2] = "#3ad6ff";
		argb[3] = "#37b4eb";
		argb[4] = "#f5857b";
		
		for(var i=0; i<arr.length; i++){
			if(id == arr[i]){
				getId(id).style.width="400px";
				getId(imginid).style.opacity=0;
				getId(imgoutid).style.opacity=1;
				getId(id).style.backgroundColor=argb[i];
			}
			else getId(arr[i]).style.width="200px";
			
			getId(arr[i]).style.WebkitTransition="width 1s";
		}
		if(id == arr[0]){
			getId(id).style.backgroundColor="#f4c053";	
		}
	}

	
	function disappear(btn){
		getId(btn).style.opacity=0;
		getId(btn).style.WebkitTransition="opacity 1s";
	}
	
	function disappear2(imginid, imgoutid){
		var arr = new Array();
		arr[0] = "site_title1";
		arr[1] = "site_title2";
		arr[2] = "site_title3";
		arr[3] = "site_title4";
		arr[4] = "site_title5";
		
		var argb = new Array();
		argb[0] = "#f5b336";
		argb[1] = "#f5982a";
		argb[2] = "#00ccff";
		argb[3] = "#00a3e6";
		argb[4] = "#f85646";
		
		for(var i=0; i<arr.length; i++){
			getId(arr[i]).style.width="240px";
			getId(arr[i]).style.backgroundColor=argb[i];
			getId(arr[i]).style.WebkitTransition="width 1s";
		}
		
		getId(imginid).style.opacity=1;
		getId(imgoutid).style.opacity=0;
	}

</script>
</head>
<body>

<div id='site_main' class='site_main'>
<div id='site_title1' onmouseover="appear('site_tle_btn'), appear2('site_title1', 'imgin', 'imgout')" 
onmouseout="disappear('site_tle_btn'), disappear2('imgin', 'imgout')">
<div id='site_tle_item'><img src="./images/first.png" id="imgin">
<img src="./images/first-hover.png" id="imgout" >
</div>

<div id='site_tle_btn' class='site_tle_btn' onmouseout="disappear('site_tle_btn')">
<input type="button" value="Connection">
</div>
</div>

<div id='site_title2' onmouseover="appear('site_tle_btn2'), appear2('site_title2', 'imgin2', 'imgout2')"
onmouseout="disappear('site_tle_btn2'), disappear2('imgin2', 'imgout2')">
<div id='site_tle_item2'><img src="./images/second.png" id="imgin2">
<img src="./images/second-hover.png" id="imgout2">
</div>
<div id='site_tle_btn2' class='site_tle_btn'>
<input type="button" value="Connection">
</div>

</div>
<div id='site_title3' onmouseover="appear('site_tle_btn3'), appear2('site_title3', 'imgin3', 'imgout3')"
onmouseout="disappear('site_tle_btn3'), disappear2('imgin3', 'imgout3')">
<div id='site_tle_item3'><img src="./images/third.png" id="imgin3">
<img src="./images/third-hover.png" id="imgout3">
</div>
<div id='site_tle_btn3' class='site_tle_btn'>
<input type="button" value="Connection">
</div>
</div>

<div id='site_title4' onmouseover="appear('site_tle_btn4'), appear2('site_title4', 'imgin4', 'imgout4')"
onmouseout="disappear('site_tle_btn4'), disappear2('imgin4', 'imgout4')">
<div id='site_tle_item4'><img src="./images/forth.png" id="imgin4">
<img src="./images/forth-hover.png" id="imgout4">
</div>
<div id='site_tle_btn4' class='site_tle_btn'>
<input type="button" value="Connection">
</div>
</div>

<div id='site_title5' onmouseover="appear('site_tle_btn5'), appear2('site_title5', 'imgin5', 'imgout5')"
onmouseout="disappear('site_tle_btn5'), disappear2('imgin5', 'imgout5')">
<div id='site_tle_item5'><img src="./images/share.png" id="imgin5">
<img src="./images/share-hover.png" id="imgout5">
</div>
<div id='site_tle_btn5' class='site_tle_btn'>
<input type="button" value="Connection">
</div>

</div>
</div>

</body>
</html>